<template>
  <el-aside id="asideNav" width="200px">
    <div class="logo-name" >
      <p>东软颐养中心</p>
      <img src="../assets/logo.png" class="logo-png"/>
    </div>

    <el-menu
        active-text-color="#ffd04b"
        background-color="#3CA2E0"
        :default-active="route.path"
        :router="true"
        unique-opened
        text-color="#fff">

      <template v-for="menu in menus" :key="menu.menusIndex">
        <el-sub-menu :index="menu.menusIndex" > 
          <template #title>
            <el-icon>
              <!-- 动态获取图标 -->
              <component :is="menu.icon" />
            </el-icon>
            <span>{{menu.title}}</span>
          </template>
          <template v-for="item in menu.children" :key="item.path">
            <el-menu-item :index="item.path"><el-icon><component :is="item.icon" /></el-icon>{{item.title}}</el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-aside>

</template>

<script setup>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

// 使用组合式API的store和route
const store = useStore();
const route = useRoute();

// 计算属性获取菜单数据
const menus = computed(() => store.getters.menus);

// 监听路由变化
watch(
  () => route.path,
  (newVal, oldVal) => {
    if(true) {
      return;
    }
    // 判断当前tab中是否已经存在
    let index = store.getters.tabs.findIndex(function (value, key) {
      return value.path === newVal;
    });
    if (index != -1 || newVal == "/login") {
      return;
    }
    let menuName = store.getters.getMenuNameByUrl(newVal);
    // 手动构建tab
    store.commit("addTab", {
      title: menuName,
      path: newVal
    });
  },
  { immediate: true }
);
</script>

<style scoped>
#asideNav {
  display: flex;
  flex-direction: column;
}


#asideNav .logo-name {
  width: 100%;
  height: 150px;
  background-color:#3CA2E0;
}
#asideNav .logo-name .logo-png{
  width: 165px;
  height: 165px;
  margin: -30px 0 0 10px;
}
#asideNav .logo-name p {
  font-weight: 800;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  /* font-weight: 550; */
  flex: 1;
  border-right: none;
}


</style>